﻿
var myChart1 = null;
var myChart2 = null;
var myChart3 = null;
var myChart4 = null;
var myChart5 = null;

function showPieCharts(CPPData) {
     
    myChart1.setOption((function (JSData) {
        var EChartData = {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            backgroundColor: '#222222',
            series: [
                {
                    name: '',
                    type: 'pie',
                    radius: ['35%', '65%'],
                    center: ['50%', '50%'],
                    startAngle: 40,
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                //position: 'center',
                                align: 'left',
                                textStyle: {
                                    fontFamily: 'Microsoft YaHei',
                                    fontSize: '12',
                                    color: '#fff',
                                    //fontWeight: 'bold'
                                },
                                //formatter: "{b} : {c} 个\n{d}%"//在区域名字后显示值及其百分比 }, labelLine:{show:true}
                            },
                            labelLine: {
                                normal: {
                                    show: true,
                                    length: 50,
                                    length2: 5,
                                    lineStyle: {
                                        color: '#fff',
                                        width: 5,
                                        type: 'solid',
                                    }
                                }
                            },
                            borderWidth: '0.5',
                            borderColor: '#cccccc',
                            borderType: 'solid',
                        }
                    },
                    data: [
                        //{
                        //    value: 320,
                        //    name: 'OK',
                        //    selected: true,
                        //    itemStyle: {
                        //        normal: {
                        //            //color: '#09D981'
                        //            color: '#54BCCE'
                        //        }
                        //    }
                        //},
                        //{
                        //    value: 30,
                        //    name: 'NG',
                        //    itemStyle: {
                        //        normal: {
                        //            color: '#C44E4C'
                        //        }
                        //    }
                        //},
                        //{
                        //    value: 12,
                        //    name: '异常',
                        //    itemStyle: {
                        //        normal: {
                        //            color: '#FFC71B'
                        //        }
                        //    }
                        //}
                    ]
                }
            ],
        };
        
        //修改标题
        EChartData.series[0].name = JSData.name;
        var colors = ["#54BCCE", "#C44E4C", "#FFC71B"];

        JSData.data.forEach(function (item, index) {
            var tmp = {
                value: 320,
                name: 'OK',
                selected: false,
                itemStyle: {
                    normal: {
                        color: ''
                    }
                }
            };

            tmp.value = item.value;
            tmp.name = item.name;
            tmp.selected = !index;
            tmp.itemStyle.normal.color = colors[index];
            EChartData.series[0].data[index] = tmp;           
        })  
        return EChartData;
    })(CPPData));
}

function showBarCharts(CPPData) {

    myChart2.setOption((function (JSData) {
        var EChartData = {
            backgroundColor: '#222222',
            tooltip: { //提示框组件
                trigger: 'axis',
                formatter: '{b}<br />{a0}: {c0}<br />',       //提示框格式  解释看这这里  http://echarts.baidu.com/option.html#tooltip.formatter
                axisPointer: {
                    type: 'shadow',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                },
                textStyle: {
                    color: '#fff',
                    fontStyle: 'normal',
                    fontFamily: '微软雅黑',
                    fontSize: 12,
                }
            },
            grid: {
                left: '1%',
                right: '4%',
                bottom: '6%',
                top: 30,
                padding: '0 0 10 0',
                containLabel: true,
            },
            //legend: {//图例组件，颜色和名字
            //    right: 10,
            //    top: 0,
            //    itemGap: 16,
            //    itemWidth: 18,
            //    itemHeight: 10,
            //    data: [{
            //        name: '流入',
            //        //icon:'image://../wwwroot/js/url2.png', //路径
            //    },
            //    {
            //        name: '流出',
            //    }],
            //    textStyle: {
            //        color: '#a8aab0',
            //        fontStyle: 'normal',
            //        fontFamily: '微软雅黑',
            //        fontSize: 12,
            //    }
            //},
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: true,//坐标轴两边留白
                    data: [],
                    axisLabel: { //坐标轴刻度标签的相关设置。
                        interval: 0,//设置为 1，表示『隔一个标签显示一个标签』
                        margin: 15,
                        textStyle: {
                            color: '#fff',
                            fontStyle: 'normal',
                            fontFamily: '微软雅黑',
                            fontSize: 12,
                        }
                    },
                    axisTick: {//坐标轴刻度相关设置。
                        show: false,
                    },
                    axisLine: {//坐标轴轴线相关设置
                        lineStyle: {
                            color: '#fff',
                            opacity: 0.2
                        }
                    },
                    splitLine: { //坐标轴在 grid 区域中的分隔线。
                        show: false,
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    splitNumber: 2,
                    axisLabel: {
                        textStyle: {
                            color: '#fff',
                            fontStyle: 'normal',
                            fontFamily: '微软雅黑',
                            fontSize: 12,
                        }
                    },
                    axisLine: {//坐标轴轴线相关设置
                        lineStyle: {
                            color: '#fff',
                            opacity: 0.2
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: ['#fff'],
                            opacity: 0.06
                        }
                    }

                }
            ],
            series: [
                {
                    name: '数量',
                    type: 'line',
                    data: [],
                    barWidth: 15,
                    areaStyle: { normal: {} },
                    barGap: 0,//柱间距离
                    label: {//图形上的文本标签
                        normal: {
                            show: true,
                            position: 'top',
                            textStyle: {
                                color: '#a8aab0',
                                fontStyle: 'normal',
                                fontFamily: '微软雅黑',
                                fontSize: 12,
                            },
                        },
                    },
                    itemStyle: {//图形样式
                        normal: {
                            //barBorderRadius: [5, 5, 0, 0],
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 1, color: 'rgba(127, 128, 225, 0.7)'
                            }, {
                                offset: 0.9, color: 'rgba(72, 73, 181, 0.7)'
                            }, {
                                offset: 0.31, color: 'rgba(0, 208, 208, 0.7)'
                            }, {
                                offset: 0.15, color: 'rgba(0, 208, 208, 0.7)'
                            }, {
                                offset: 0, color: 'rgba(104, 253, 255, 0.7)'
                            }], false),
                        },
                    },
                },              
            ]
        };

        //修改标题
        EChartData.series[0].name = JSData.name;


        //填充X轴数据和Series数据
        JSData.data.forEach(function (item, index) {
            var xAxisData = {
                value: 320,
                name: 'OK',
                selected: false,
                itemStyle: {
                    normal: {
                        color: ''
                    }
                }
            };
       
            //设置X轴坐标值
            EChartData.xAxis[0].data[index] = item.name;
            //设置Y轴series值
            EChartData.series[0].data[index] = item.value;
           
        });        
        
        return EChartData;
    })(CPPData));


}



var EChartData3 = {
    backgroundColor: '#222222',
    animation:false,
    series: [
        {
            name: '使用率',
            type: 'pie',
            radius: ['100%', '130%'],
            center: ['50%', '80%'],
            startAngle: 180,
            color: [new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#00a2ff'
            }, {
                offset: 1,
                color: '#70ffac'
            }]), "transparent"],
            labelLine: {
                normal: {
                    show: false
                }
            },
            label: {
                normal: {
                    position: 'center'
                }
            },
            data: [
                {//使用率填充区域
                    value: 40,
                    name: '填充空余',
                    label: {
                        normal: {
                            formatter: '{b}%',
                            textStyle: {
                                color: '#fff',
                                fontSize: 30,
                            }
                        }
                    }
                },
            {//空闲率填充区域
                value: 10,
                name: '',
                itemStyle: {
                    normal: {
                        //color: '#09D981'
                        color: '#404040'
                    }
                },

            },
            {//底部半圆透明区域
                value: 50,
                name: '%',
                itemStyle: {
                    normal: {
                        color: '#222'
                    }
                },
            }]
        },
    ]
};

function showGaugeCharts(CPPData,echartWnd) {
 
    echartWnd.setOption((function (JSData) {

        EChartData3.series[0].data[0].value = JSData * 0.5;
        EChartData3.series[0].data[0].name = JSData;
        EChartData3.series[0].data[1].value = (100 - JSData) * 0.5;
        
        return EChartData3;
    })(CPPData));
}


      